Smart Heading

Smart Heading, use as free test heading, or assign as the app name or last reload time.

Usage

import { SmartHeading } from @motor-js/core

//...

<SmartHeading />

Props

Prop	Description	Options / Example
type	heading type, displaying either free text, last reload timestamp or the app name	oneOf 'lastReload' 'free' 'appName'
size	size of the heading	oneOf 'tiny' 'small' 'medium' 'large' 'xlarge'
level	Heading level from H1 to H6, prop takes the number.	oneOf '1' '2' '3' '4' '5' '6'
margin	heading margin	string '5px'
color	heading color	string 'null' (default taken from theme)
locales	Language specific format to use for lastReload	string 'null' (default) ar-SA Arabic (Saudi Arabia) bn-BD Bangla (Bangladesh) bn-IN Bangla (India) cs-CZ Czech (Czech Republic) da-DK Danish (Denmark) de-AT Austrian German de-DE Standard German (as spoken in Germany) el-GR Modern Greek en-AU Australian English en-CA Canadian English en-GB British English en-IE Irish English en-IN Indian English en-NZ New Zealand English en-US US English en-ZA English (South Africa) es-AR Argentine Spanish es-CL Chilean Spanish es-CO Colombian Spanish es-ES Castilian Spanish (as spoken in Central-Northern Spain) es-MX Mexican Spanish es-US American Spanish fi-FI Finnish (Finland) fr-BE Belgian French fr-CA Canadian French fr-CH "Swiss" French fr-FR Standard French (especially in France) he-IL Hebrew (Israel) hi-IN Hindi (India) hu-HU Hungarian (Hungary) id-ID Indonesian (Indonesia) it-CH "Swiss" Italian it-IT Standard Italian (as spoken in Italy) jp-JP Japanese (Japan) ko-KR Korean (Republic of Korea) nl-BE Belgian Dutch nl-NL Standard Dutch (as spoken in The Netherlands) no-NO Norwegian (Norway) p l-PL Polish (Poland) pt-BR Brazilian Portuguese pt-PT European Portuguese (as written and spoken in Portugal) ro-RO Romanian (Romania) ru-RU Russian (Russian Federation) sk-SK Slovak (Slovakia) sv-SE Swedish (Sweden) ta-IN Indian Tamil ta-LK Sri Lankan Tamil th-TH Thai (Thailand) tr-TR Turkish (Turkey) zh-CN Mainland China, simplified characters zh-HK Hong Kong, traditional characters zh-TW Taiwan, traditional characters
options	Date and Time format for lastReload. Must have a value in locales set for this to take effect.	object 'null' (default)
dateStyle	"full" "long" "medium" "short"
timeStyle	"full" "long" "medium" "short"
localeMatcher	"best-fit" (default) "lookup"
timeZone
hour12	true false
hourCycle	"h11" "h12" "h23" "h24"
formatMatcher	"basic" "best-fit" (default)
weekday	"long" "short" "narrow"
year	"2-digit" "numeric"
month	"2-digit" "long" "narrow" "numeric" "short"
day	"2-digit" "long"
hour	"2-digit" "long"
minute	"2-digit" "long"

Examples

Simple Smart Heading example

function SmartHeadingTest() {

return (

<Motor config={config}>

<SmartHeading />

</Motor>

);

}

Theme API

smartHeading

Settings in global.smartHeading are below:

e.g. global.smartHeading.color = 'brand'

Setting	Description	Options / Example
color	heading color	string